import React from 'react'
import {withRouter} from 'react-router-dom'
import {connect} from 'react-redux'
import { Row,Card,Form, Input, Button, Checkbox,Spin } from 'antd';
import {loginAsgnc} from '../../action/action'
function Login(props) {
    const onFinish = (values) => {
        console.log(values)
        props.loginAsgnc(values,props.history)
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <Row align='middle' justify='center' style={{height:'100vh',background:'#ddd'}}>
            <Card title="用户登录" extra={<a href="#">注册</a>} style={{ width: 500 }}>
                {props.user.isLoading ? <Spin/> : ''} 
                <Form
                    name="basic"
                    labelCol={{
                        span: 5,
                    }}
                    wrapperCol={{
                        span: 18,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名！',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码！',
                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item
                        name="remember"
                        valuePropName="checked"
                        wrapperCol={{
                            offset: 10,
                            span: 16,
                        }}
                    >
                        <Checkbox>记住密码？</Checkbox>
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 10,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </Row>
    )
}
export default connect(state=>state,{loginAsgnc})(withRouter(Login))